<template>
  <div class="verification">
    <van-icon @click="goHome" class="icon" name="arrow-left" size="20" />
    <div class="header">
      <h6>请输入验证码</h6>
    </div>
    <div class="footer">
      <p class="text">已发送验证码至{{ phone }}</p>
      <!-- 密码输入框 -->
      <van-password-input
        :value="value"
        :length="4"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { reqlogReg } from "@/api/login";
import { useRoute, useRouter } from "vue-router";
import { setToken } from "@/util/auth";
import { showToast } from "vant";
import { setCookie } from "@/Hook/cookie";
const route = useRoute();
const router = useRouter();
const phone = route.query.phone;
// console.log(phone);
const goHome = () => history.back();
const value = ref("");
const showKeyboard = ref(true);
watch(value, async () => {
  if (value.value.length == 4) {
    // console.log(value.value);
    let username = "username";
    let code = value.value;
    const result = await reqlogReg({ phone, code, username });
    // console.log(result);
    if (result.code == 0) {
      showToast("感谢您注册成为巴马旅游会员！");
      setToken(result.data.id);
      setCookie("uid", result.data.id);
      router.push("/");
    } else if (result.code == 3) {
      showToast("验证码错误");
    }
  }
});
</script>

<style scoped>
.header {
  overflow: hidden;
  width: 100%;
  height: 2.48rem;
  box-sizing: border-box;
  background-image: url(https://product-ssl-qiniu.bmtrip.com/20191125_banner.png);
  background-size: cover;
  position: relative;
  padding: 0 1rem;
}
.icon {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 100;
}
.header h6 {
  font-size: 0.43rem;
  font-weight: 400;
  margin-top: 1rem;
}
.footer {
  box-sizing: border-box;
  padding: 0 1rem;
  font-size: 0.3rem;
}
.text {
  margin: 0.3rem 0;
  font-size: 0.3rem;
}
</style>
